<!DOCTYPE html>
<html lang="zh" class="no-js"  xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>啊呀</title>
		<link rel="stylesheet" type="text/css" th:href="@{/css/default.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{/css/component.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{http://demo.demohuo.top/jquery/24/2484/demo/css/normalize.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{/css/componen.css}" />
		<script th:src="@{/js/modernizr.custom.js}"></script>
		<script type="text/javascript">
		var autoTextarea = function(elem, extra, maxHeight) {
		extra = extra || 0;
		var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
		isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
		addEvent = function(type, callback) {
		elem.addEventListener ?
		elem.addEventListener(type, callback, false) :
		elem.attachEvent('on' + type, callback);
		},
		getStyle = elem.currentStyle ? function(name) {
		var val = elem.currentStyle[name];
		 
		if(name === 'height' && val.search(/px/i) !== 1) {
		var rect = elem.getBoundingClientRect();
		return rect.bottom - rect.top -
		parseFloat(getStyle('paddingTop')) -
		parseFloat(getStyle('paddingBottom')) + 'px';
		};
		 
		return val;
		} : function(name) {
		return getComputedStyle(elem, null)[name];
		},
		minHeight = parseFloat(getStyle('height'));
		 
		elem.style.resize = 'none';
		 
		var change = function() {
		var scrollTop, height,
		padding = 0,
		style = elem.style;
		 
		if(elem._length === elem.value.length) return;
		elem._length = elem.value.length;
		 
		if(!isFirefox && !isOpera) {
		padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
		};
		scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
		 
		elem.style.height = minHeight + 'px';
		if(elem.scrollHeight > minHeight) {
		if(maxHeight && elem.scrollHeight > maxHeight) {
		height = maxHeight - padding;
		style.overflowY = 'auto';
		} else {
		height = elem.scrollHeight - padding;
		style.overflowY = 'hidden';
		};
		style.height = height + extra + 'px';
		scrollTop += parseInt(style.height) - elem.currHeight;
		document.body.scrollTop = scrollTop;
		document.documentElement.scrollTop = scrollTop;
		elem.currHeight = parseInt(style.height);
		};
		};
		 
		addEvent('propertychange', change);
		addEvent('input', change);
		addEvent('focus', change);
		change();
		};
		</script>
	</head>
	<body>
		<div class="container demo-1">
			<div class="content">
				<div id="large-header" class="large-header">
					<canvas id="demo-canvas"></canvas>
					<div class="logo_box">


						<div class="container">
							<header class="clearfix">
								
								<h1><img th:src="@{https://pic.imgdb.cn/item/6162e98c2ab3f51d91029474.png}" style="width: 40%;">
								<br>招新报名</h1>
								<p>看清这四个字母的脸，他们来了，就是招新了</p>
							</header>
							<div class="main">
								<form th:action="@{/add}" class="cbp-mc-form" method="post" onsubmit="return checkinput();">
									<div class="cbp-mc-column">
										<label for="name">姓名</label>
										<input type="text" id="name" name="name" placeholder="一般是两到三个字">
										<label for="sex">性染色体组成</label>
										<select id="sex" name="sex">
											<option value="0">XX</option>
											<option value="1">XY</option>
										</select>
										<label for="age">年龄</label>
										<input type="text" id="age" name="age" placeholder="介于-1至100的整数"
											onblur="y1('age')">
										<label for="email">邮箱</label>
										<input type="text" id="email" name="email" placeholder="里面有@的那个东西"
											onblur="y1()">
										<label for="phone">手机号</label>
										<input type="text" id="phone" name="phone" placeholder="就是1开头的那种"
											onblur="y2('phone')">
										<label for="qq">QQ</label>
										<input type="text" id="qq" name="qq" placeholder="是纯数字" onblur="y2('qq')">
									</div>
									<div class="cbp-mc-column">

										<label for="fx">方向</label>
										<select id="fx" name="target">
											<option value="CSDN">CSDN</option>
											<option value="ACM">ACM</option>
											<option value="ACM+CSDN">ACM+CSDN</option>
										</select>
										<label for="grjl">个人经历</label>
										<textarea id="grjl" name="experience" placeholder="不可以在这里打广告"></textarea>
										<label for="jj">简介</label>
										<textarea id="jj" name="profile" placeholder="那就在这打广告吧"></textarea>
										<h3 for="qq"
											onclick="window.location.href='https://jq.qq.com/?_wv=1027&k=wiAu69CP'">
											点击入群治疗头发茂密症<br>和各路大佬激情互卷</h3>
									</div>
									<div class="cbp-mc-column">
										各位小可爱：<br>
											&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;你们好。<br>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;你现在进入的是河南科技大学CSDN高校俱乐部及软件学院ACM集训队招新专用系统，现在，由我来告诉你应该如何操作这一系统：<br>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;首先，不出意外的话，现在正在注视着屏幕的你应该是个中国人，那么你的名字应该是由两到四个字组成的一段优美的字符，请务必准确的输入它。<br>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;然后，来到了性染色体部分，作为一个学习过生物的人类，我想你应该很了解自己的性染色体组成。<br>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;接着，是年龄，除非时空出现裂痕，不然应该不会有人的年龄会不是个正数吧，在座各位也不会有人有100岁了吧。<br>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;到了十分重要的联系方式部分，首先是邮箱，请务必仔细检查以确保邮箱地址无误，我们之后的回信和通知全部都会通过邮箱进行；然后是手机号和QQ，也请务必检查，确保无误。<br>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;后边就是你想要选择的方向，是想要加入CSDN呢，还是想要加入ACM呢，还是“小孩子才做选择，我全都要”。<br>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;最激动人心的部分来了，个人经历和简介部分，上限均为500字，请仔细斟酌，如实填写，这将直接决定你是否能够进入下一步的考核，以及你的考核方式。<br>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;总之，这就是这个小系统的使用说明，我们欢迎你的加入。<br>
									</div>

									
									<div class="cbp-mc-submit-wrap"><input class="cbp-mc-submit" type="submit"
											value="点击报名" onclick="yz()" /></div>
								</form>
							</div>
						</div>



					</div>
				</div>
			</div>
		</div>
		<script>
				
		        autoTextarea(document.getElementById("jj"));
		        autoTextarea(document.getElementById("grjl"));
			function y1() {
				var str = /[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+/;
				if (!str.test($("#email").val())) {
					$("#email").val("");
					layer.tips('小东西给爷爬', '#email', {
						tips: [3, '#0FA6D8'],
						time: 3000
					});
				}
			}

			function y2(w) {
				var str = /^\d{1,}$/;
				if (!str.test($("#" + w).val())) {
					$("#" + w).val("");
					layer.tips('小东西给爷爬', '#' + w, {
						tips: [3, '#0FA6D8'],
						time: 3000
					});
				}
			}
			var a = true;

			function checkinput() {
				return a;
			}

			function yz() {
				// a=false;
				// alert("4")
				[name, age, email, phone, qq, grjl, jj] = [get('name'), get('age'), get('email'), get('phone'), get('qq'), get(
					'grjl'), get('jj')]

				// alert(name == ""|| age == ""|| email == ""|| phone == ""|| qq ==""|| grjl == ""|| jj == "")
				if (name == ""|| email == ""|| phone == ""|| qq ==""|| grjl == ""|| jj == "") {
					alert('把信息都给我写完');
					a = false;
					return;
				}
			}

			function get(e) {
				return document.getElementById(e).value
			}
			
		</script>
	</body>
</html>
<script th:src="@{https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js}"></script>
<script th:src="@{http://demo.demohuo.top/jquery/24/2484/demo/js/TweenLite.min.js}"></script>
<script th:src="@{http://demo.demohuo.top/jquery/24/2484/demo/js/EasePack.min.js}"></script>
<script th:src="@{http://demo.demohuo.top/jquery/24/2484/demo/js/rAF.js}"></script>
<script th:src="@{http://demo.demohuo.top/jquery/24/2484/demo/js/demo-1.js}"></script>
<script th:src="@{https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js}"></script>
